<template>
    <div class="header">
        <div class="logo">
            <img class="logoBj" src="~@/assets/logo.png" alt />
        </div>
        <div class="right-menu">
            <div class="menu-item flex" style="width: 600px;">
                <div class="flex" style="width: 300px; overflow: hidden;">
                    <i class="el-icon-s-custom" style="font-size: 20px;padding: 0 10px;line-height: 60px;" />
                    <div class="username">您 好, {{ username }}</div>
                </div>
                <el-dropdown class="avatar-container" trigger="click">
                    <div class="avatar-wrapper" style="width: 40px;">
                        退 出<i class="el-icon-switch-button" style="font-size: 20px;"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown" class="user-dropdown">
                        <el-dropdown-item divided @click.native="chooseSystem" v-show="entrance_flag == 'IADP'">
                            <span style="display:block;">选择业态</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">
                            <span style="display: block">退 出</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            username: sessionStorage.username,
            entrance_flag: sessionStorage.entrance_flag,
        };
    },
    created() {
    },
    mounted() { },
    methods: {
        chooseSystem() {
            let routerParams = {
                account: sessionStorage.account,
                password: sessionStorage.password,
                token: sessionStorage.accountPassword, //这里的token是加密的账号密码
                organizationNo: sessionStorage.organizationNo,
                entrance_flag: sessionStorage.entrance_flag,
                farming: 'FISH'
            }
            let paramsStr = '';
            for (let key in routerParams) {
                paramsStr += `${key}=${routerParams[key]}&`
            }
            let url = `${this.$baseurl.urlServiceUrl}agricultural-unified-login/#/login?${paramsStr}`
            window.location.href = url;
        },
        async logout() {
            if (!sessionStorage.entrance_flag) {
                await this.$store.dispatch('user/logout')
                this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            } else {
                let url = `${this.$baseurl.urlServiceUrl}agricultural-unified-login/#/login`
                sessionStorage.clear();
                localStorage.clear();
                window.location.href = url;
            }
        }
    }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.flex {
    display: flex;
    justify-content: flex-end;
}

.username {
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 60px;
    background: #4281b5; //#4281b5
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 10px 10px #0000002b;
    cursor: pointer;

    .logo {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 20px;

        .logoBj {
            height: 30px;
            width: 30px;
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.3s;

            &:hover {
                height: 40px;
                width: 40px;
                border-radius: 8px;
            }
        }
    }

    .right-menu {
        height: 100%;
        line-height: 60px;
        display: flex;
        align-items: center;
        position: relative;
        color: #fff;
        font-size: 14px;

        .menu-item {
            height: 100%;
        }

        .avatar-container {
            padding: 0 50px 0 20px;
            cursor: pointer;

            .avatar-wrapper {
                position: relative;
                color: #fff;

                .el-icon-switch-button {
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    font-weight: 600;
                    transform: translate(0, -50%);
                }
            }
        }
    }
}
</style>